<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- calculatorform.qdoc -->
  <title>计算器窗体示例 | Qt Designer 手册</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="../qtdoc/index.html">Qt 5.14</a></td><td ><a href="qtdesigner-manual.html">Qt Designer 手册</a></td><td >计算器窗体示例</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtdesigner-manual.html">Qt 5.14.2 参考文档</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#preparation">准备</a></li>
<li class="level1"><a href="#calculatorform-class-definition">CalculatorForm 类定义</a></li>
<li class="level1"><a href="#calculatorform-class-implementation">CalculatorForm 类实现</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">计算器窗体示例</h1>
<span class="subtitle"></span>
<!-- $$$calculatorform-brief -->
<p>在应用程序中使用 <i>Qt Designer</i> 创建的窗体 。</p>
<!-- @@@calculatorform -->
<!-- $$$calculatorform-description -->
<div class="descr"> <a name="details"></a>
<p>计算器窗体示例展示了如何使用 <a href="../qtwidgets/qwidget.html">QWidget</a> 子类的用户界面信息，在应用程序中使用 <i>Qt Designer</i> 创建的窗体。我们使用 <a href="designer-using-a-ui-file.html">uic的自动连接</a> 特性将窗体小部件的信号自动连接到代码中的槽 。</p>
<p class="centerAlign"><img src="images/calculatorform-example.png" alt="Screenshot of the Calculator Form example" /></p><p>该示例展示了两个用于输入整数值的旋转框（spin box），以及一个显示整数值和的标签（label）。每当更新任何一个旋转框（spin box）时，小部件和窗体之间的信号槽连接都会确保标签（label）也得到更新 。</p>
<a name="preparation"></a>
<h4 id="preparation">准备</h4>
<p>本例的用户界面完全是使用 <i>Qt Designer</i> 设计的。结果是一个描述窗体、使用的小部件、它们之间的任何信号槽连接和其他标准用户界面属性的UI文件 </p>
<p>为了确保示例可以使用此文件，我们需要在示例的项目文件中包括一个 <code>FORMS</code> 声明:</p>
<pre class="cpp">

  FORMS       = calculatorform.ui

</pre>
<p>在构建项目时，<code>uic</code> 将创建一个头文件，使我们能够构建窗体 。</p>
<a name="calculatorform-class-definition"></a>
<h4 id="calculatorform-class-definition">CalculatorForm 类定义</h4>
<p><code>CalculatorForm</code> 类使用 <code>calculatorform.ui</code> 文件中描述的用户界面。为了访问窗体及其内容，我们需要包含 <code>uic</code> 在构建过程中创建的 <code>ui_calculatorform.h</code> 头文件:</p>
<pre class="cpp">

  <span class="preprocessor">#include &quot;ui_calculatorform.h&quot;</span>

</pre>
<p>我们通过子类化 <a href="../qtwidgets/qwidget.html">QWidget</a> 来定义 <code>CalculatorForm</code> 类，因为窗体本身是基于 <a href="../qtwidgets/qwidget.html">QWidget</a> 的:</p>
<pre class="cpp">

  <span class="keyword">class</span> CalculatorForm : <span class="keyword">public</span> <span class="type"><a href="../qtwidgets/qwidget.html">QWidget</a></span>
  {
      Q_OBJECT

  <span class="keyword">public</span>:
      <span class="keyword">explicit</span> CalculatorForm(<span class="type"><a href="../qtwidgets/qwidget.html">QWidget</a></span> <span class="operator">*</span>parent <span class="operator">=</span> nullptr);

  <span class="keyword">private</span> <span class="keyword">slots</span>:
      <span class="type">void</span> on_inputSpinBox1_valueChanged(<span class="type">int</span> value);
      <span class="type">void</span> on_inputSpinBox2_valueChanged(<span class="type">int</span> value);

  <span class="keyword">private</span>:
      Ui<span class="operator">::</span>CalculatorForm ui;
  };

</pre>
<p>除了构造函数外，该类还包含两个私有槽，它们根据 <code>uic</code> 所需的自动连接命名约定进行命名。私有 <code>ui</code> 成员变量指的是窗体，并用于访问用户界面的内容 。</p>
<a name="calculatorform-class-implementation"></a>
<h4 id="calculatorform-class-implementation">CalculatorForm 类实现</h4>
<p>构造函数只调用基类的构造函数并设置窗体的用户界面 。</p>
<pre class="cpp">

  CalculatorForm<span class="operator">::</span>CalculatorForm(<span class="type"><a href="../qtwidgets/qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
      : <span class="type"><a href="../qtwidgets/qwidget.html">QWidget</a></span>(parent)
  {
      ui<span class="operator">.</span>setupUi(<span class="keyword">this</span>);
  }

</pre>
<p>使用 <code>setupUI()</code> 函数设置用户界面。我们将 <code>this</code> 作为参数传递给这个函数，以使用 <code>CalculatorForm</code> 小部件本身作为用户界面的容器 。</p>
<p>为了自动连接用户界面中定义的旋转框中的信号，我们使用命名约定来指示用户界面中哪些小部件及其信号应该连接到每个槽。当用户界面中名为 &quot;inputSpinBox1&quot; 的旋转框发出 <a href="../qtwidgets/qspinbox.html#valueChanged">valueChanged()</a> 信号时，第一个槽被调用:</p>
<pre class="cpp">

  <span class="type">void</span> CalculatorForm<span class="operator">::</span>on_inputSpinBox1_valueChanged(<span class="type">int</span> value)
  {
      ui<span class="operator">.</span>outputWidget<span class="operator">-</span><span class="operator">&gt;</span>setText(<span class="type"><a href="../qtcore/qstring.html">QString</a></span><span class="operator">::</span>number(value <span class="operator">+</span> ui<span class="operator">.</span>inputSpinBox2<span class="operator">-</span><span class="operator">&gt;</span>value()));
  }

</pre>
<p>当发生这种情况时，我们使用信号提供的值通过直接设置输出标签（label）的新文本来更新输出标签（label）。我们通过类的私有 <code>ui</code> 变量访问输出标签（label）和另一个旋转框（spin box）。</p>
<p>当第二个旋转框 &quot;inputSpinBox2&quot; 发出 <a href="../qtwidgets/qspinbox.html#valueChanged">valueChanged()</a> 信号时，第二个槽被调用:</p>
<pre class="cpp">

  <span class="type">void</span> CalculatorForm<span class="operator">::</span>on_inputSpinBox2_valueChanged(<span class="type">int</span> value)
  {
      ui<span class="operator">.</span>outputWidget<span class="operator">-</span><span class="operator">&gt;</span>setText(<span class="type"><a href="../qtcore/qstring.html">QString</a></span><span class="operator">::</span>number(value <span class="operator">+</span> ui<span class="operator">.</span>inputSpinBox1<span class="operator">-</span><span class="operator">&gt;</span>value()));
  }

</pre>
<p>在本例中，读取第一个旋转框的值并将其与信号提供的值结合起来。同样，通过 <code>ui</code> 变量直接更新输出标签（label） 。</p>
<p><a href="https://code.qt.io/cgit/qt/qttools.git/tree/examples/designer/calculatorform?h=5.14">示例项目 @ code.qt.io</a></p>
</div>
<!-- @@@calculatorform -->
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2020 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
